<template>
  <div class="workplace">
    <div class="banner">
      <a-breadcrumb>
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>工作台</a-breadcrumb-item>
      </a-breadcrumb>
      <h3>工作台</h3>
      <div class="box">
        <div class="left">
          <div class="avatar">
            <img src="../assets/BiazfanxmamNRoxxVxka.png" />
          </div>
          <div class="content">
            <div class="title">
              晚上好， <span class="username">admin</span> ，我猜你可能累了
            </div>
            <div class="id">大一新生 | 物联网应用技术专业</div>
          </div>
        </div>
        <div class="right">
          <a-statistic title="结算单数" :value="102" />
          <a-divider
            type="vertical"
            style="height: 60px; width: 4px; margin: 0 20px"
          />
          <a-statistic title="校园排行" :value="301">
            <template #suffix>
              <span style="font-size: 16px">/ 6348</span>
            </template>
          </a-statistic>
          <a-divider
            type="vertical"
            style="height: 60px; width: 4px; margin: 0 20px"
          />
          <a-statistic title="回复信息数" :value="112893" />
        </div>
      </div>
    </div>
    <div class="main">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="16">
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <doing></doing>
            </a-col>
            <a-col :span="24">
              <trends></trends>
            </a-col>
          </a-row>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <navCard></navCard>
            </a-col>
            <a-col :span="24">
              <exponent></exponent>
            </a-col>
            <a-col :span="24"> </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import doing from "@/components/workplace/doing.vue";
import trends from "@/components/workplace/trends.vue";
import navCard from "@/components/workplace/navCard.vue";
import exponent from "@/components/workplace/exponent.vue";
export default {
  name: "",
  components: {
    doing,
    trends,
    navCard,
    exponent,
  },
  mixins: [],
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.workplace {
  .banner {
    padding: 20px 26px;
    background-color: #fff;
    h3 {
      margin: 8px 0 0;
      height: 48px;
      line-height: 48px;
      color: #000000e0;
      font-weight: bold;
      font-size: 20px;
    }
    .box {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      height: 72px;
      .left {
        display: flex;
      }
      .right {
        display: flex;
      }
      .avatar {
        width: 72px;
        height: 72px;
        margin-right: 20px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .content {
        .title {
          height: 28px;
          line-height: 28px;
          font-size: 20px;
          margin-bottom: 12px;
          .username {
            color: #f87171;
          }
        }
        .id {
          height: 22px;
          line-height: 22px;
          color: #00000073;
          font-size: 14px;
        }
      }
    }
  }
  .main {
    padding: 16px;
  }
}
</style>